<template>
  <a-card :bordered="false" class="zgBox">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="6" :sm="6">
            <a-form-item label="年度">
              <!-- <a-date-picker v-model="queryParam.shijian" /> -->
              <a-date-picker style="width:100%" :open='yearShowOne' @openChange="openChangeOne"
                @panelChange="panelChangeOne" mode="year" format="YYYY" type="date"
                :default-value="moment(new Date(), 'YYYY')" v-model="queryParam.shijian" suffix-icon=" "
                placeholder="年份" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="成果编号">
              <a-input placeholder="请填写成果编号" v-model="queryParam.cxj_xmbh"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="成果名称">
              <a-input placeholder="请填写成果名称" v-model="queryParam.cxj_mc_zw"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="专家姓名">
              <a-input placeholder="请填写专家姓名" v-model="queryParam.zjxm"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-button type="primary" @click="exportpftj" style="margin-left: 8px">导出</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
      <!-- <p style="color: #ff0000;font-size: 16px;">该组成果全部评审完成后，点击"全部提交"完成评分，提交后不可修改。</p> -->
    </div>
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 高级查询区域-->
    <div class="table-operator" style="display: flex; align-items: center;justify-content: space-between;"></div>
    <!-- table区域-begin -->
    <div>
      <h2 style="text-align:center;font-size: 20px;">
        {{ new Date().getFullYear() }}年度电力科技创新奖职工初审表
        <!-- <a-button type="primary" style="margin: 0px;" @click="downloadFile">初审表下载</a-button> -->
      </h2>
      <!-- tableLayout="auto" -->
      <a-table ref="table" size="middle" :scroll="{ x: 1100 }" bordered rowKey="id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
        @change="handleTableChange">
        <template v-for="col in indicatorItemsScore" :slot="col"
          slot-scope="text, record, index">
          <div :key="col">
            <a-popover placement="top" v-if="record.editable">
              <template slot="content">
                <div v-if="col == 'jscs_cxx'">
                  <p>有根本性创新，16-20分</p>
                  <p>有一定创新，10-15分</p>
                  <p>原有技术改良，1-9分</p>
                </div>
                <div v-else-if="col == 'jscs_xjx'">
                  <p>技术水平领先，16-20分</p>
                  <p>技术水平先进，10-15分</p>
                  <p>技术水平一般，1-9分</p>
                </div>
                <div v-else-if="col == 'jscs_jjxy'">
                  <p>在行业可全面推广，16-20分</p>
                  <p>在行业可部分推广，10-15分</p>
                  <p>在行业特定情况下局部推广，1-9分</p>
                </div>
                <div v-else-if="col == 'jscs_ssxg'">
                  <p>经济效益和社会价值重大，9-10分</p>
                  <p>经济效益和社会价值较大，6-8分</p>
                  <p>有一定的经济效益和社会价值，1-5分</p>
                </div>
                <div v-else-if="col == 'jscs_tgjz'">
                  <p>项目实施后，问题得到根本解决，25-30分</p>
                  <p>项目实施后，问题得到基本解决，16-24分</p>
                  <p>项目实施后，问题得到部分解决，1-15分</p>
                </div>
              </template>
              <a-input type="number" style="margin: -5px 0" :value="text"
                @change="e => handleChange(e.target.value, record.key, col)" />
            </a-popover>
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="jscs_pingjiayj" slot-scope="text, record, index">
          <div key="jscs_pingjiayj">
              <!-- :value="text" -->
            <a-textarea
              v-if="record.editable"
              v-model.trim="text"
              :auto-size="{ minRows: 1, maxRows: 5 }"
              placeholder="请填写评审意见"
              @change="e => handleChange(e.target.value, record.key, 'jscs_pingjiayj')"
            />
            <!-- <template v-else>
              {{ text }}
            </template> -->
            <a-popover v-else title="" placement="bottom" arrow-point-at-center>
              <template slot="content">
                <p style="max-width: 300px;word-break: break-all;margin-bottom: 0;">{{ text }}</p>
              </template>
              <span class="sl-span">{{ text }}</span>
            </a-popover>
          </div>
        </template>
        <span slot="jscs_zongfen" slot-scope="text, record">
          <span>{{ record.jscs_zongfen }}</span>
        </span>
        <template slot="action" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <!-- <span>操作</span> -->
            <span v-if="!record.editable">
              <a :disabled="editingKey !== '' ? true : false" @click="() => edit(record.key)">评分</a>
            </span>
            <span v-else>
              <a @click="() => save(record.key, record)">保存</a>
              <a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record.key)">
                <a>取消</a>
              </a-popconfirm>
            </span>
          </div>
        </template>
      </a-table>
    </div>
    <cxj-jscs-pf-js-modal ref="modalForm" @ok="modalFormOk"></cxj-jscs-pf-js-modal>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import CxjJscsPfJsModal from './modules/CxjJscsPfJsModal'
import moment from 'moment'
import Vue from 'vue'
import { USER_INFO } from "@/store/mutation-types"
import {
  // 初审项目评分表-职工类-评分列表
  jscsPfListZg,
  // 初审项目评分表-职工类-编辑
  cxjJscsPfZgEdit
} from "@/api/api";
export default {
  name: 'CxjJscsPfJsList',
  mixins: [mixinDevice],
  components: {
    CxjJscsPfJsModal
  },
  data() {
    return {
      xszjfzData: [],
      cxj_jscs_fz_id: '',
      reviewStatistics: '',
      cacheData: [],
      description: '初审项目评分表-职工类-获取分组项目',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: '5%',
          customCell: () => {
            return {
              style: {
                'min-width': '40px',
              },
            };
          },
          align: "center",
          // fixed: 'left',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '年度',
          align: "center",
          dataIndex: 'shijian',
          width: '5%',
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '成果编号',
          align: "center",
          dataIndex: 'cxj_xmbh',
          width: '12%',
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '成果名称',
          dataIndex: 'cxj_mc_zw',
          width: '15%',
          customCell: () => {
            return {
              style: {
                'min-width': '160px',
              },
            };
          },
        },
        {
          title: '专家姓名',
          dataIndex: 'zj_xm',
          width: '8%',
          customCell: () => {
            return {
              style: {
                'min-width': '160px',
              },
            };
          },
        },
        {
          title: '审查意见',
          // width: 800,
          align: 'center',
          children: [
            {
              title: '技术创新性',
              align: "center",
              width: '7%',
              customCell: () => {
                return {
                  style: {
                    'min-width': '100px',
                  },
                };
              },
              children: [{
                title: "20分",
                align: "center",
                width: '7%',
                customCell: () => {
                  return {
                    style: {
                      'min-width': '100px',
                    },
                  };
                },
                dataIndex: "jscs_cxx",
                scopedSlots: { customRender: 'jscs_cxx' }
              }]
            },
            {
              title: '技术先进性',
              align: "center",
              width: '7%',
              customCell: () => {
                return {
                  style: {
                    'min-width': '100px',
                  },
                };
              },
              children: [{
                title: "20分",
                align: "center",
                width: '7%',
                customCell: () => {
                  return {
                    style: {
                      'min-width': '100px',
                    },
                  };
                },
                dataIndex: "jscs_xjx",
                scopedSlots: { customRender: 'jscs_xjx' }
              }]
            },
            {
              title: '使用范围',
              align: "center",
              width: '7%',
              customCell: () => {
                return {
                  style: {
                    'min-width': '100px',
                  },
                };
              },
              children: [{
                title: "20分",
                align: "center",
                width: '7%',
                customCell: () => {
                  return {
                    style: {
                      'min-width': '100px',
                    },
                  };
                },
                dataIndex: "jscs_jjxy",
                scopedSlots: { customRender: 'jscs_jjxy' }
              }]
            },
            {
              title: '经济效益',
              width: '7%',
              customCell: () => {
                return {
                  style: {
                    'min-width': '100px',
                  },
                };
              },
              children: [{
                title: "10分",
                align: "center",
                width: '7%',
                customCell: () => {
                  return {
                    style: {
                      'min-width': '100px',
                    },
                  };
                },
                dataIndex: "jscs_ssxg",
                scopedSlots: { customRender: 'jscs_ssxg' }
              }]
            },
            {
              title: '实施效果',
              width: '7%',
              customCell: () => {
                return {
                  style: {
                    'min-width': '100px',
                  },
                };
              },
              children: [{
                title: "30分",
                align: "center",
                width: '7%',
                customCell: () => {
                  return {
                    style: {
                      'min-width': '100px',
                    },
                  };
                },
                dataIndex: "jscs_tgjz",
                scopedSlots: { customRender: 'jscs_tgjz' }
              }]
            },
            {
              title: '合计',
              align: "center",
              width: '8%',
              customCell: () => {
                return {
                  style: {
                    'min-width': '60px',
                  },
                };
              },
              dataIndex: 'jscs_zongfen',
              scopedSlots: { customRender: 'jscs_zongfen' },
              sorter: (a, b) => b.total_score - a.total_score,
            },
            {
              title: '评审意见',
              width: '13%',
              customCell: () => {
                return {
                  style: {
                    'min-width': '100px',
                  },
                };
              },
              dataIndex: 'jscs_pingjiayj',
              scopedSlots: { customRender: 'jscs_pingjiayj' }
            }
          ]
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 110,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/cxj/cxjJscsPfZg/list",
        delete: "/cxj/cxjJscsPfZg/delete",
        deleteBatch: "/cxj/cxjJscsPfZg/deleteBatch",
        exportXlsUrl: "/cxj/cxjJscsPfZg/exportXls",
        importExcelUrl: "cxj/cxjJscsPfZg/importExcel",
        // 初审分组专家表-获取分组列表
        cxjCsGetZjFz: '/cxj/cxjJscsFzZj/cxjCsGetZjFz'
      },
      superFieldList: [],
      // 分组id
      fzid: "",
      editingKey: '',
      queryParam: {},
      dictOptions: {},
      superFieldList: [],
      fileStatus: "",
      selectedRowKeys: [],
      selectionRows: [],
      loading: false,
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      /* 年份参数开始 */
      yearShowOne: false,
      shijian: moment(new Date()).format('YYYY'),
      /* 年份参数结束 */
    }
  },
  created() {
    this.$set(this.dictOptions, 'isValid', [{ text: '是', value: 'Y' }, { text: '否', value: 'N' }])
    this.loadData();
    this.getSuperFieldList();
  },
  watch: {
    dataSource() {
      this.updateDataSource();
    }
  },
  computed: {
    /* indicatorItemsScore() {
      return ['jscs_cxx','jscs_xjx','jscs_jjxy', 'jscs_ssxg', 'jscs_tgjz', 'jscs_xmcs']
    } */
    indicatorItemsScore() {
      return ['jscs_cxx', 'jscs_xjx', 'jscs_jjxy', 'jscs_ssxg', 'jscs_tgjz']
    }
  },
  methods: {
    moment,
    /* 年份控制开始 */
    openChangeOne(status) {
      //status是打开或关闭的状态
      if (status) {
        this.yearShowOne = true;
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      // params.shijian = value;
      this.shijian = moment(value).format('YYYY');
      this.queryParam.shijian = this.shijian;
      this.yearShowOne = false
    },
    /* 年份控制结束 */
    updateDataSource() {
      this.dataSource.map(item => {
        item.jscs_zongfen = this.indicatorItemsScore.reduce((total, key) => {
          return total + Number(item[key] || 0);
        }, 0);
      });
    },
    // 切换分组
    handleSelectFz(value) {
      this.fzid = value;
      this.getjscsPfTjZj();
      this.loadData(1);
    },
    // 获取技术初审评分表-评分统计
    getjscsPfTjZj() {
      let formData = new FormData();
      formData.append('fzid', this.fzid)
      jscsPfTjZj(formData).then(res => {
        // console.log('评分统计',res)
        if (res.code == 200) {
          this.reviewStatistics = res.result;
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    /* 对行内进行修改开始 */
    handleChange(value, key, column) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      // console.log('target',target)
      if (column == 'jscs_cxx' && value > 20) {
        value = 20;
      } else if (column == 'jscs_xjx' && value > 20) {
        value = 20;
      } else if (column == 'jscs_jjxy' && value > 20) {
        value = 20;
      } else if (column == 'jscs_ssxg' && value > 10) {
        value = 10;
      } else if (column == 'jscs_tgjz' && value > 30) {
        value = 30;
      }
      if (target) {
        target[column] = value;
        this.dataSource = newData;
        console.log('input', this.dataSource)
      }
    },
    edit(key) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.dataSource = newData;
      }
    },
    save(key, record) {
      const newData = [...this.dataSource];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.dataSource = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
      let formData = {
        jscsCxx: record.jscs_cxx,
        jscsJjxy: record.jscs_jjxy,
        jscsPingjiayj: record.jscs_pingjiayj,
        // 是否回避
        // jscsSfhb: record.jscs_sfhb,
        jscsSsxg: record.jscs_ssxg,
        jscsTgjz: record.jscs_tgjz,
        jscsXjx: record.jscs_xjx,
        cxjCxjId: record.cxj_cxj_id,
        id: record.id,
        jscsZt: record.jscs_zt
      }
      cxjJscsPfZgEdit(formData).then(res => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.loadData();
        } else {
          this.$message.warning(res.message);
          this.loadData();
        }
      })

    },
    cancel(key) {
      const newData = [...this.dataSource];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
        delete target.editable;
        this.dataSource = newData;
      }
    },
    /* 对行内进行修改结束 */
    /* 获取列表固定格式开始 */
    getQueryField() {
      //TODO 字段权限控制
      var str = "id,";
      this.columns.forEach(function (value) {
        str += "," + value.dataIndex;
      });
      return str;
    },
    // 获取分组项目
    loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      this.loading = true;
      let params = Object.assign(this.queryParam, this.isorter, this.filters)
      params.field = this.getQueryField();
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      params.shijian = this.shijian;
      jscsPfListZg(params).then(res => {
        if (res.success) {
          this.dataSource = res.result.records || res.result;
          this.dataSource.map((item, index) => {
            item.key = index;
          })
          this.cacheData = this.dataSource;
          if (res.result.total) {
            this.ipagination.total = res.result.total;
          } else {
            this.ipagination.total = 0;
          }
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData();
      //清空列表选中
      this.onClearSelected()
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },

    searchQuery() {
      this.loadData(1);
    },
    searchReset() {
      this.queryParam = {};
      // this.flid = "";
      this.shijian = moment(new Date()).format('YYYY');
      this.queryParam.shijian = this.shijian;
      this.loadData(1);
    },
    /* 获取列表固定格式结束 */

    exportpftj() { },
    initDictConfig() { },
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'string', value: 'sysZjId', text: '专家ID', dictCode: '' })
      fieldList.push({ type: 'string', value: 'cxjCxjId', text: '成果ID', dictCode: '' })
      fieldList.push({ type: 'double', value: 'jscsCxx', text: '技术创新性', dictCode: '' })
      fieldList.push({ type: 'double', value: 'jscsXjx', text: '技术先进性', dictCode: '' })
      fieldList.push({ type: 'double', value: 'jscsSsxg', text: '实用化程度', dictCode: '' })
      fieldList.push({ type: 'double', value: 'jscsJjxy', text: '经济效益', dictCode: '' })
      fieldList.push({ type: 'double', value: 'jscsTgjz', text: '推动作用', dictCode: '' })
      fieldList.push({ type: 'string', value: 'jscsPingjiayj', text: '评审意见', dictCode: '' })
      fieldList.push({ type: 'double', value: 'jscsZongfen', text: '总分', dictCode: '' })
      fieldList.push({ type: 'string', value: 'jscsZt', text: '评分状态', dictCode: '' })
      fieldList.push({ type: 'string', value: 'shijian', text: '年度', dictCode: '' })
      fieldList.push({ type: 'string', value: 'bz1', text: '备注1', dictCode: '' })
      fieldList.push({ type: 'string', value: 'bz2', text: '备注2', dictCode: '' })
      fieldList.push({ type: 'string', value: 'bz3', text: '备注3', dictCode: '' })
      fieldList.push({ type: 'switch', value: 'isValid', text: '是否有效' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
/deep/* {
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/deep/.ant-table-tbody>tr>td {
  word-break: break-all;
  white-space: normal;
  word-wrap: break-word;
  font-size: 14px;
  padding: 6px 3px !important;
}

/deep/.ant-table-tbody>tr>td>div {
  font-size: 14px;
}

/deep/.ant-table-thead>tr>th {
  word-break: break-all;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  font-size: 14px;
  padding: 5px 3px !important;
}

.editable-row-operations a {
  margin-right: 8px;
}

.tjdata {

  // margin-top: 20px;
  span {
    margin-right: 20px;
    line-height: 30px;
    font-size: 16px;
  }
}

.count {
  color: #ee9900;
  font-weight: 700;
  font-size: 16px;
}

/deep/.ant-table-tbody>tr>td:nth-child(11) {
  color: #ee9900 !important;
  font-weight: 700;
  font-size: 16px;
}

.editable-row-operations a {
  margin: 0px 2px;
}

.table-page-search-wrapper .anty-form-btn .ant-form-item {
  margin-bottom: 10px;
}
</style>